<!--
 * @Descripttion: 使用方法：<upload :pic_name="'pic_name'"></upload>
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-09-25 15:19:16
-->
<template>
	<div>
		<el-upload
			class="upload-demo"
			:http-request="handleUpload"
			:limit="limit"
			:on-exceed="handleExceed"
			:before-upload="beforeAvatarUpload"
			drag
			action
			multiple
		>
			<i class="el-icon-upload" v-if="url == ''"></i>
			<div class="el-upload__text" v-if="url == ''">
				将PDF文件拖拽到虚线框内，或
				<em>点击上传</em>
				<br />
				<span>仅支持上传.pdf 扩展名的协议文件</span>
			</div>
			<iframe v-if="url != ''" class="pdf" :src="head_url + url"> </iframe>
			<button v-if="url != '' && again" class="pdf2">重新上传</button>
		</el-upload>
	</div>
</template>

<script>
import { put, getFileNameUUID } from '@/common/aliyun.oss.client'

export default {
	name: 'Upload',
	props: {
		limit: {
			type: Number,
			default: 1
		},
		action: {
			type: String,
			default: ''
		},
		url: {
			type: String,
			default: ''
		},
		headers: {
			type: Object,
			default: () => {}
		},
		pic_name: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		listType: {
			type: String,
			default: 'picture-card'
		},
		again: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			head_url: 'https://img.zhongfuyun.com/',
			fileList: []
		}
	},
	methods: {
		handleRemove(file, fileList) {
			this.fileList = []
		},
		handleExceed(files, fileList) {
			//文件超出个数限制时的钩子触发函数，limit限制数量
			this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
		},
		beforeRemove(file, fileList) {
			//移除图片
			return this.$confirm(`确定移除 ${file.name}？`)
		},
		handleSuccess(response, file, fileList) {
			this.fileList = fileList
			this.$emit('on-success', file, fileList)
		},
		/**
		 * 自定义上传方法
		 */
		handleUpload(option) {
			// 生成的文件名称
			let objName = getFileNameUUID()
			// console.log(option);
			// console.log(objName);
			var that = this
			// 调用 ali-oss 中的方法
			put(`${objName}`, option.file).then(res => {
				// console.log(res); //返回的文件信息
				this.fileList.push({
					pic_name: this.pic_name,
					name: res.name,
					url: this.head_url + res.name
				})
				// 传递数据到父组件
				that.sendMsg(res.name)
			})
		},
		//子向父传值
		sendMsg(url) {
			this.$emit('func', url)
		},
		beforeAvatarUpload(file) {
			console.log(file.type)
			const isJPG = file.type === 'application/pdf'

			if (!isJPG) {
				this.$message.error('上传格式只能是 PDF !')
				return false
			}

			// const isLt2M = file.size / 1024 / 1024 < 5     //这里做文件大小限制
			// if(!isLt2M) {
			//     this.$message.error("上传文件大小不能超过 5MB!");
			//     return false;
			// }

			return isJPG
		}
	}
}
</script>

<style scoped>
.pdf {
	width: 360px;
	height: 180px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 1;
}

.pdf2 {
	/* width: 20px;
        height: 20px; */
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	opacity: 1;
	background-color: var(--btn);
	box-shadow: 1px 2px 5px var(--purple2);
	-moz-box-shadow: 1px 2px 5px var(--purple2);
	-webkit-box-shadow: 1px 2px 5px var(--purple2);
	opacity: 0.8;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 20px;
	border-radius: 18px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	cursor: pointer;
	font-size: 14px;
	color: #ffffff;
	border: none;
}

.pdf2:hover {
	opacity: 1;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Uploadbig.vue